<template>
<div class="data-source">
    <div class="box-top">
        <el-form>
            <el-form-item label="数据源名称">
                <el-input clearable placeholder="请输入数据源名称" v-model="form.keyword"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select clearable v-model="form.databaseType" placeholder="请选择数据库类型">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="主机名">
                <el-input clearable placeholder="请输入主机名" v-model="form.databaseIp"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-preventReClick="2000" @click="search">查询</el-button>
                <el-button v-preventReClick="2000" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="box-mid">
        <el-button type="primary" @click="handleAdd()">新增</el-button>
    </div>
    <div class="box-table">
        <el-table v-loading="loading" :data="tableData" tooltip-effect="dark">
            <template slot="empty">
                <no-data :types="isSearch">
                    <span>暂无数据</span>
                </no-data>
            </template>
            <!-- <el-table-column label="数据库" prop="databaseName" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="名称" prop="sourceName" show-overflow-tooltip></el-table-column>
            <el-table-column label="类型" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.databaseType===0">Mysql</span>
                    <span v-if="scope.row.databaseType===1">DB2</span>
                    <span v-if="scope.row.databaseType===2">Oracle</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="系统" prop="databaseSchema" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="主机名" prop="databaseIp" show-overflow-tooltip></el-table-column>
            <el-table-column label="端口" prop="databasePort" show-overflow-tooltip></el-table-column>
            <el-table-column label="用户名" prop="databaseUser" show-overflow-tooltip></el-table-column>
            <el-table-column label="描述" prop="description" show-overflow-tooltip></el-table-column>
            <el-table-column label="修改者" prop="lastUpdateOper" show-overflow-tooltip></el-table-column>
            <el-table-column label="最后连通时间" prop="lastConnectTime" show-overflow-tooltip></el-table-column>
            <el-table-column label="测试连接结果" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.databaseConnectivity===0" type="success">正常</el-tag>
                    <el-tag v-else type="danger">失效</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
                <template slot-scope="scope">
                    <el-button type="text" v-preventReClick="2000" @click="handleTest(scope.row)">测试</el-button>
                    <el-button type="text" @click="handleAdd(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleRemove(scope.row.sourceId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="tableData.length>0" class="box-pagenation">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
    <add-source v-if="addSource.show" :addForm="addSource" @save="saveAdd"></add-source>
</div>
</template>

<script>
import AddSource from './Add'
import NoData from '@/components/NoData'
export default {
    name: 'SourceList',
    components: {
        AddSource,
        NoData
    },
    data () {
        const projectId = this.$route.params.id
        return {
            projectId,
            sourceId: null,
            addSource: {
                show: false,
                title: '新增数据源',
                form: {
                    sourceName: null,
                    databaseType: null,
                    databaseIp: null,
                    databasePort: null,
                    databaseName: null,
                    databaseUser: '',
                    databasePwd: '',
                    description: null
                }
            },
            options: [
                { label: 'Mysql', value: 0 },
                { label: 'DB2', value: 1 },
                { label: 'Oracle', value: 2 }
            ],
            loading: false,
            form: {
                keyword: null,
                databaseType: null,
                databaseIp: null
            },
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            isSearch: false
        }
    },
    created () {
        this.init()
    },
    methods: {
        // 新增数据源保存
        saveAdd (flag) {
            if (flag) {
                const params = {
                    ...this.addSource.form,
                    projectId: this.projectId
                }
                let url = ''
                if (this.sourceId) {
                    url = '/dataSource/updateDataSource'
                    params.sourceId = this.sourceId
                } else {
                    url = '/dataSource/addDataSource'
                }
                this.$post(url, params).then(res => {
                    this.init()
                    this.$message.success('保存成功')
                    this.addSource.show = false
                })
            } else {
                const {
                    databaseType,
                    databaseIp,
                    databasePort,
                    databaseName,
                    databaseUser,
                    databasePwd
                } = this.addSource.form
                const params = {
                    databaseType,
                    databaseIp,
                    databasePort,
                    databaseName,
                    databaseUser,
                    databasePwd,
                    projectId: this.projectId
                }
                this.$post('/dataSource/preCheckDataSource', params).then(res => {
                    res ? this.$message.success('连接成功') : this.$message.error('连接失败')
                })
            }
        },
        // 新增、编辑提供测试功能
        handleAdd (item) {
            if (item) {
                const { sourceId, sourceName, databaseType, databaseIp, databasePort, databaseName, databaseUser, databasePwd, description } = item
                this.sourceId = sourceId
                this.addSource.title = '编辑数据源'
                this.addSource.form = {
                    sourceName,
                    databaseType,
                    databaseIp,
                    databasePort,
                    databaseName,
                    databaseUser,
                    databasePwd,
                    description
                }
            } else {
                this.sourceId = null
                this.addSource.title = '新增数据源'
                this.addSource.form = {
                    sourceName: null,
                    databaseType: null,
                    databaseIp: null,
                    databasePort: null,
                    databaseName: null,
                    databaseUser: '',
                    databasePwd: '',
                    description: null
                }
            }
            this.addSource.show = true
        },
        handleTest (item) {
            const { sourceId } = item
            const params = {
                projectId: this.projectId,
                sourceId
            }
            this.$post('/dataSource/checkDataSource', params).then(res => {
                res ? this.$message.success('连接成功') : this.$message.error('连接失败')
                this.init()
            })
        },
        search () {
            this.currentPage = 1
            this.isSearch = true
            this.init()
        },
        init () {
            this.loading = true
            const { databaseType, keyword, databaseIp } = this.form
            const params = {
                projectId: this.projectId,
                keyword,
                databaseType,
                databaseIp,
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('/dataSource/queryDataSources', params).then(res => {
                if (res) {
                    const {
                        total,
                        rows
                    } = res
                    this.total = total
                    this.tableData = rows
                }
            }).finally(() => {
                this.loading = false
            })
        },
        reset () {
            this.form = {
                databaseType: null,
                keyword: null,
                databaseIp: null
            }
            this.isSearch = false
            this.init()
        },
        handleRemove (id) {
            this.$confirm(`确定要删除该条数据源吗?`, '提示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                type: 'warning'
            }).then(() => {
                const params = {
                    projectId: this.projectId,
                    sourceIds: [id]
                }
                this.$post('/dataSource/deleteDataSources', params).then(res => {
                    if (res) {
                        this.$message.success('删除成功')
                        this.init()
                    }
                })
            }).catch(() => {})
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        }
    }
}
</script>
